import React, { useState } from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { homee } from '../../router/Index';
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, children) {
  return {
    key,
    children,
    label,
  };
}

const App = () => {
    function getItem(label, key, children) {
        return {
          key,
          children,
          label,
        };
      }
      const rfce=(arr)=>{
        let items=[]
        arr&&arr.forEach((item)=>{
            if(item.children){
                items.push(
                    getItem(
                        <NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>,item.path,rfce(item.children)
                    )
                )
            }else{
                items.push(
                    getItem(
                        <NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>,item.path
                    )
                )
            }
            
        })
        return items
      }
      const items=rfce(homee)
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;